<!--
- Author:  LiShibin.
- Date:    2017/7/4 0004.
- File:    list.
-->
<template>
  <div>
    <div style="margin-bottom: 0;" class="Web_Box">
      <div class="Topmenu">
        <h1>选择品牌</h1>
        <span></span>
      </div>
      <!--分类Start-->
      <div class="qjdy">
        <div style="position: fixed;top:50px;right:0;bottom:49px;left: 0;background: #ffffff" class="fenliezimu">
          <good-classify :cont-height="classifyContHeight" :brandsData="brandsData" @chooseClassify="getChooseClassify">
            <!--<div class="esb-top" style="padding: 10px;height: 51px;">-->
              <!--<span @click="goSearch" style="width: 85%;height: 30px;">-->
                <!--<i class="iconfont icon-sousuo"></i>-->
                <!--<input type="text" style="height: 28px;pointer-events: none;" placeholder="搜索你想要的表">-->
              <!--</span>-->
              <!--<i @click="goCart" class="iconfont icon-gouwuche on" style=" "></i>-->
              <!--<i class="iconfont icon-kefu"></i>-->
            <!--</div>-->
          </good-classify>
        </div>

      </div>

      <!--分类End-->


    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import PullMorePromt from '../../components/pullMoreNotice'
  import Classify from '../../components/classify/classify'

  export default{
    mixins: [
      mapModules({goodsClassList: 'goodsClassList'}),
      mapRules({once: 'goodsClassList'})
    ],
    data() {
      return {
        currentClassify: this.$route.query.id || '', // ：全部类型
        brandsData: [],
        from: this.$route.params.from
      }
    },
    components: {
      'pullMorePromt': PullMorePromt,
      'goodClassify': Classify
    },
    created() {
      this.getBrandsData()
      var screenHeight = window.screen.height || document.body.clientHeight
      this.classifyContHeight = screenHeight - 158
      console.log(screenHeight)
      // var _this = this
      window.onresize = this.$utils.throttle2(function() {
        console.log(window.screen.height)
        // _this.$set(_this, 'classifyContHeight', window.screen.height - 158)
      }, 600)
    },
    methods: {
      getChooseClassify(evt) {
        // console.log(evt)
        if (this.from == 'maintenance') {
          this.$router.push({name: 'watch-maintenance', params: evt})
        } else {
          this.$router.push({name: 'watch-recycling', params: evt})
        }
      },
      goCart() {
        this.$router.push({name: 'cart-list'})
      },
      goSearch() {
        this.$router.push({name: 'search-search'})
      },
      getBrandsData() {
        var tempBrands = this.$storage.getBrandsData()
        if (tempBrands.length > 0) {
          this.brandsData = tempBrands
        }
        this.$request.getBrandsData().then(data => {
          var sortBrandData = []
          if (data.length > 0) {
            data.sort(function(a, b) {
              return a.brand_initial > b.brand_initial ? 1 : a.brand_initial == b.brand_initial ? 0 : -1
            })
            // console.log(data)
            for (var i = 0, l = data.length; i < l; i++) {
              var tempItem = data[i]
              if (i == 0) {
                sortBrandData.push({alphabet: tempItem.brand_initial, brands: [tempItem]})
              } else if (sortBrandData[sortBrandData.length - 1].alphabet != tempItem.brand_initial) {
                sortBrandData.push({alphabet: tempItem.brand_initial, brands: [tempItem]})
              } else {
                sortBrandData[sortBrandData.length - 1].brands.push(tempItem)
              }
            }
            this.$storage.setBrandsData(sortBrandData)
            this.brandsData = sortBrandData
            // console.log(sortBrandData)
          }
        }).finally(() => {
        })
      }
    }
  }
</script>

<style>
.mint-indexlist-navlist{
  margin-top: 1.5rem;

}
.mint-indexlist-nav{
  justify-content: left !important;
  position: fixed;
  right: 5px;
  line-height: 13px;
  font-size: 12px;
  text-align: center;
  color: #50a3ff;
  border-left: solid 1px #fff!important;
}
  .mint-indexlist-content {
    margin-right: 0px!important;
  }
</style>
